<script setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios';
// 双线绑定数据
let list = reactive({
    title:"",
    flag:false
})
// 数据列表
let todoList = reactive([
  
])
onMounted(async ()=>{
   let data = await axios.get('http://127.0.0.1:3000/TodoList')
   data.data.data.forEach(element => {
        if(element.flag===false){
            todoList.push(element)
        }
   });
   console.log(todoList);
})
// 新增
async function add(){
    console.log(1);
    let data = await axios.post('http://127.0.0.1:3000/TodoList',list)
    todoList.push(data.data.data)
    list.title = ""
}
// 删除
async function del(id){
    let data = await axios.delete(`http://127.0.0.1:3000/TodoList/${id}`)
    let idx = ''
    todoList.forEach((item, index) => {
        if (item.id === id) {
            idx = index
        }
    })
    // 利用下标删除数组里的内容
    todoList.splice(idx, 1);
}
// 删除已完成
async function delAll(){
    let ids = []
    let idx = []
    todoList.forEach((item,index)=>{
        if(item.flag === true){
            idx.push(index)
            ids.push(item.id)
        }
    })
    let data = await axios.put(`http://127.0.0.1:3000/TodoList`,ids)
    console.log(data);
    for (let index = idx.length - 1; index >= 0; index--) {  // 从 idx.length - 1 开始递减
        todoList.splice(idx[index],1)
        console.log(idx[index]);
    }

    
    
}

// 回收站
let isShow = ref(true)
let huishou = reactive([])
async function huisohu() {
  let data = await axios.get('http://127.0.0.1:3000/TodoList');
  data.data.data.forEach(async element => {
    if (element.flag === true) {
      // 检查huishou中是否已经存在该元素
      const exists = huishou.some(item => item.id === element.id);
      if (!exists) {
        // 如果不存在，将其添加到huishou
        huishou.push(element);
      }
    }
  });
  isShow.value = false;
  console.log(huishou);
}
</script>
<template>
    <div class="box">
        <div class="listChoose"> <span @click="isShow=true">待办事项</span>|<span @click="huisohu">回收站</span></div>
        <div><h3 v-if="isShow">事项列表</h3> <h3 v-else="isShow=false">回收站列表</h3></div>
        <input v-model="list.title"  @keydown.enter="add" style="width: 95%" placeholder="Please input" />

        <div v-if="isShow">
            <div class="list" v-for="(item,index) in todoList" :key="item.id">   
                <el-checkbox v-model="item.flag" class="listCheckbox">{{ item.title }} </el-checkbox>
                <span class="icon-del" @click="del(item.id)">
                    <svg t="1715343451091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="16" height="16"><path d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0" fill="#1296db" p-id="1588"></path><path d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0" fill="#1296db" p-id="1589"></path><path d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0" fill="#1296db" p-id="1590"></path></svg>
                </span>
            </div>
        </div>
        <div v-else>
            <div class="list" v-for="(item,index) in huishou" :key="item.id">   
                <el-checkbox  class="listCheckbox">{{ item.title }} </el-checkbox>
                <span class="icon-del" @click="del(item.id)">
                    <svg t="1715343451091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="16" height="16"><path d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0" fill="#1296db" p-id="1588"></path><path d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0" fill="#1296db" p-id="1589"></path><path d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0" fill="#1296db" p-id="1590"></path></svg>
                </span>
            </div>
        </div>
        <button @click="delAll">清空已完成</button>
    </div>

</template>
<style scoped>
    .box{

        width: 470px;
        text-align: center;
        padding-bottom: 30px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 10px;
        padding-top: 8px
    }
    .listCheckbox{
        position: absolute;
        left: 3px;
    }
    .list{
        position: relative;
        width: 95%;
        height: 30px;
        margin: 5px auto;
        background-color: rgba(172, 169, 169, 0.3);
        border-radius: 5px
    }
    .icon-del{
        width: 10px;
        height: 10px;
        position: absolute;
        top: 8px;
        right: 15px;
    }
</style>